<template>
  <div>
    <el-button @click="oepnDialog" style="width: 200px; margin-left: 8px; margin-bottom: 10px"
      >文件解析队列</el-button
    >
    <el-dialog
      title="文件解析队列"
      :visible.sync="dialogVisible"
      width="1000px"
      :before-close="handleClose"
    >
      <div>
        <div class="title-bg">排队中</div>
        <el-table :data="queued" size="small" border>
          <el-table-column prop="task_id" label="任务ID"></el-table-column>
          <el-table-column prop="file_route" label="文件位置"></el-table-column>
          <el-table-column prop="file_id" label="文件ID"></el-table-column>
          <el-table-column prop="username" label="用户"></el-table-column>
          <el-table-column prop="score" label="操作">
            <template slot-scope="scope">
              <el-button type="danger" size="mini" @click="stop(scope.row.task_id)">
                终止
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="title-bg">解析中</div>
        <el-table :data="active" size="small" border>
          <el-table-column prop="task_id" label="任务ID"></el-table-column>
          <el-table-column prop="file_route" label="文件位置"></el-table-column>
          <el-table-column prop="file_id" label="文件ID"></el-table-column>
          <el-table-column prop="username" label="用户"></el-table-column>
          <el-table-column prop="score" label="操作">
            <template slot-scope="scope">
              <el-button type="danger" size="mini" @click="stop(scope.row.task_id)">
                终止
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getData, postData } from '@/service/getData';
let timer = null;
export default {
  data() {
    return {
      dialogVisible: false,
      queued: [],
      active: [],
      timer: null,
    };
  },

  mounted() {
    // this.calcData(); // 计算数据
  },
  methods: {
    handleClose() {
      this.dialogVisible = false;
      clearInterval(this.timer);
    },
    oepnDialog() {
      this.dialogVisible = true;
      this.getList();
      this.timer = setInterval(() => {
        this.getList();
      }, 2000);

      // 启动定时任务 一秒已刷新数据
    },
    stop(id) {
      postData(
        'api/knowledge_base/files/abort_tasks/',
        {
          task_id: id,
        },
        'post',
      ).then((res) => {
        this.$message.success('终止成功');
        this.getList();
      });
    },
    getList() {
      //
      getData('api/knowledge_base/files/get_parse_tasks/', {}, 'get')
        .then((res) => {
          console.log(res);
          this.queued = res.queued;
          this.active = res.active;
          // 获取选项 并赋值
        })
        .finally(() => {});
    },
  },
};
</script>
<style scoped>
.el-dialog__close {
  color: #666;
}
.title-bg {
  background: #f5f7fa;
  padding: 4px 10px;
  margin: 10px 0;
}
</style>
